<html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Youtube Curator Tool</title>
<script src='/_ah/channel/jsapi'></script>
<script src="/static/js/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi" />
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-tabs.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-alert.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="/static/js/jquery.quicksearch.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script type="text/javascript">
  onOpened = function(){
    // do nothing
  }
  onError = function(message){
    //alert(mesesage);
  }
  onMessage = function(message) {
    var data = $.parseJSON(message.data);
    var contents = '<a href="#" data-dismiss="alert" class="close">×</a>';
    contents += '<strong>' + data['condition'] + '!</strong> ' + data['message'];
    $('#alerts').html(contents);
  }
</script>
<style>
body {
    padding-bottom: 40px;
    padding-top: 60px;
    line-height:18px;
}

.container{
  width:1280px;
}
.model-body {
  padding: 0px;
  max-height: 800px;
}
#multicolumn1 {
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	column-count: 3;
	column-gap: 10px;
  list-style-type: none;
}

</style>
</head>
<body>
 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
       <a class="brand" href="/">YouTube Content Curator</a>
         <div class="nav-collapse" style="float:right">
           <li class="active"><a href="/">Videos</a></li>
            <li><a href="/org_tags">Partner Tagging</a></li>
            <li><a href="#report">Report</a></li>
          </ul>
          </div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div id="alerts" class="alert fade in">
       <strong>Hello! {{username}}</strong> Welcome to the curation system. My purpose is to keep you informed of changes within the system.
    </div>

    <div class="row-fluid show-grid">
    <div class="span4" style="width:15%;">
    {% block filters %}
    {% endblock %}
    </div>
    <div class="span8" style="width:80%" >
{% block content %}

{% endblock %}
    </div>
  </div>

  <footer>
    <p>&copy; Company 2012</p>
  </footer>
  </div>

  <script>
    var channel = new goog.appengine.Channel('{{ channel_id }}');
    var socket = channel.open();
    socket.onopen = onOpened;
    socket.onmessage = onMessage;
    socket.onerror = onError;
    socket.onclose = onClose;
  </script>
</body>
</html>

